import React from 'react'
import ZxNotice from '../../component/ZxModal/ZxNotice'
import imgFood5 from '../../Images/header.png'
import '../../component/font/iconfont.css'
import './ZxVipCenter.css'
import axios from 'axios'
import * as api from '../../utils/Zxapi'


class ZxVipCenter extends React.Component{
    constructor(){
        super()
        this.state={
            data:[
                // {vipId:1,vipName:'张三',vipPhone:'13578451111',registeredTime:'2020-11-11',headerPhoto:imgFood5},
                // {vipId:2,vipName:'李四',vipPhone:'13578451111',registeredTime:'2020-11-11',headerPhoto:imgFood5},
                // {vipId:3,vipName:'王五',vipPhone:'13578451111',registeredTime:'2020-11-11',headerPhoto:imgFood5},
                // {vipId:4,vipName:'赵六',vipPhone:'13578451111',registeredTime:'2020-11-11',headerPhoto:imgFood5},
                // {vipId:5,vipName:'练练',vipPhone:'13578451111',registeredTime:'2020-11-11',headerPhoto:imgFood5},
                // {vipId:6,vipName:'点点',vipPhone:'13578451111',registeredTime:'2020-11-11',headerPhoto:imgFood5},
                // {vipId:7,vipName:'屈曲',vipPhone:'13578451111',registeredTime:'2020-11-11',headerPhoto:imgFood5}
            ],
            // vipData:{},
            modal2: false,
            /* 查询会员信息 */
            userName:'',
            /* 设置会员权益==打折 */
            vipDiscount:'',
            currentPage:1,
            discountData:{titleId:6,tiName:'设置会员权益',btnName:'提交'}
        }
    }
    /* 组件加载的时候渲染数据 */
    componentDidMount(){
        this.getVipHouData()
    }
    /* 在这里发起请求==获取后端的实际数据==实际会员信息==在 componentDidMount里面调用*/
    getVipHouData=()=>{
        axios({
            url:api.GET_STOPVIPDATA,
            method:'get',
            params:{
                currentPage:this.state.currentPage,
                pageSize:1,
                shop_phone:1,  
            }
        }).then(data=>{
            this.setState({
                // currentPage:this.state.currentPage+1,
                data:data.data.dataList
            })
        //    console.log(data.data.dataList)
        }).catch(err=>{

        })
    }

    /* 渲染本页面的表格数据 */
    getVipData=()=>{
      return this.state.data.map(item=>{
      return (<div key={item.user_id} className='tableBody'>
               <div className='headerImg'>
                   {/* 差头像字段 */}
                  <img src={item.user_photo_url} alt=""/>
               </div>
               <div className='vipDetail'>
                    <div>{item.user_name}</div>
                    <div>{item.user_phone}</div>
               </div>
               <div className='vipItem'>{item.vip_register_time}</div>
             </div>)
       })
    } 
    /* 点击箭头 ==返回店铺首页 */
    backStore(){
       this.props.history.push('/Home/MyStore')
    }
     /* 对话框的关闭回调函数 */
     onClose = key => () => {
        this.setState({
          [key]: false,
        });
      }
    /* 点击设置==弹出弹框设置打折 */  
    setVip(){
        this.setState({
            modal2:true
        })
    }
    /* 获取input框输入的值 */
    getVipSerch=(e)=>{
        this.setState({
            userName:e.target.value,
        })
      console.log(this.state.userName)
      console.log('1111111')
    }
    /* 点击 查询的时候===获取查询的值==向后端发起请求==重新渲染页面*/
    submit(){
        let {userName}=this.state
        axios({
            url:api.GET_STOPVIPDATA,
            method:'get',
            params:{
                currentPage:1,
                pageSize:1,
                shop_phone:1,
                user_name:userName,
            }
        }).then(data=>{
            this.setState({
                data:data.data.dataList
            })
           console.log(data.data.dataList)
        }).catch(err=>{

        })       
    }
    render(){
        let table=[]
        if (this.state.data.length>0) {
            table=this.getVipData()
        }else{
            table=<h3>没有会员信息!</h3>
        }
        return(
            <div className='vipBox'>
                <div className='vipHeaderTitle'>
                    <span className='iconfont icon-fanhuijian1' onClick={this.backStore.bind(this)}></span>
                    <h3><span className='iconfont icon-huiyuan2'></span>会员中心</h3>
                </div> 
                <div className='vipBtn'>
                    <div>
                        <button className='setBtn' onClick={this.setVip.bind(this)}>设置</button>
                    </div>
                    {/* 搜索按钮 */}
                    <div className='SearchBtn'>
                        <input className='inputS' value={this.state.valueData} onChange={this.getVipSerch}/>
                        <span className='iconfont icon-soushuo' onClick={this.submit.bind(this)}></span>
                    </div>
                </div>            
                <div>
                    {table}                       
                </div>
                {/* 弹出框组件 */}
                <ZxNotice data={this.state.discountData} modal2={this.state.modal2} onClose={this.onClose}></ZxNotice>
            </div>
        )
    }
}
export default ZxVipCenter